<template>
  <div>
    <el-form v-model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="商铺名称" prop="storename">
        <el-input v-model="ruleForm.storename" :disabled="this.flag"></el-input>
      </el-form-item>
      <el-form-item label="商铺LOGO" prop="logo" v-show="upload">
        <div class="demo-image__placeholder">
          <div class="block">
            <el-image :src="ruleForm.logo"></el-image>
          </div>
        </div>
        <form action="http://localhost:8080/storeInfo/Logo" method="post" enctype="multipart/form-data" target="frameName" v-show="upload">
           <input type="file" style="display:block" name="logo" @change="changeImg">
            <input type="submit" value="选择修改">
        </form>
        <iframe src="" frameborder="0" name="frameName" v-show="false"></iframe>
      </el-form-item>
      <el-form-item label="收货地址" prop="address">
         <el-input v-model="ruleForm.address" :disabled="this.flag"></el-input>
      </el-form-item>
       <el-form-item label="商铺联系人" prop="linkman">
           <el-input v-model="ruleForm.linkman" :disabled="this.flag"></el-input>
       </el-form-item>
       <el-form-item label="商铺联系人电话" prop="phone">
           <el-input v-model="ruleForm.phone" :disabled="this.flag"></el-input>
       </el-form-item>
       <el-form-item label="订餐电话" prop="orderphone">
       <el-input v-model="ruleForm.orderphone" :disabled="this.flag"></el-input>
           </el-form-item>
       <el-form-item label="起送价" prop="initiateprice">
            <el-input v-model="ruleForm.initiateprice" :disabled="this.flag"></el-input>
       </el-form-item>
       <el-form-item label="配送费" prop="dphprice">
           <el-input v-model="ruleForm.dphprice" :disabled="this.flag"></el-input>
       </el-form-item>
       <el-form-item label="商家公告" prop="affiche">
           <el-input v-model="ruleForm.affiche" :disabled="this.flag"></el-input>
       </el-form-item>
       <el-form-item label="友情提示" prop="notice">
           <el-input v-model="ruleForm.notice" :disabled="this.flag"></el-input>
       </el-form-item>
       <el-form-item label="配送服务" prop="dispatching">
           <el-input v-model="ruleForm.dispatching" :disabled="this.flag"></el-input>
       </el-form-item>
       <el-form-item label="营业执照" prop="license" v-show="upload">
           <div class="demo-image__placeholder">
                     <div class="block">
                       <el-image :src="ruleForm.license"></el-image>
                     </div>
           </div>
           <form action="http://localhost:8080/storeInfo/License" method="post" enctype="multipart/form-data" target="frameName" v-show="upload">
                      <input type="file" style="display:block" name="license" >
                       <input type="submit" value="选择修改">
           </form>
           <iframe src="" frameborder="0" name="frameName" v-show="false"></iframe>

       </el-form-item>
        <el-form-item label="餐饮许可证" prop="permit" v-show="upload">
           <div class="demo-image__placeholder">
                     <div class="block">
                       <el-image :src="ruleForm.permit"></el-image>
                     </div>
            </div>
            <form action="http://localhost:8080/storeInfo/Permit" method="post" enctype="multipart/form-data" target="frameName" v-show="upload">
                       <input type="file" style="display:block" name="permit" >
                        <input type="submit" value="选择修改">
                    </form>
            <iframe src="" frameborder="0" name="frameName" v-show="false"></iframe>

        </el-form-item>
       <el-form-item label="商铺状态" prop="storestatus">
          <el-input v-model="ruleForm.storestatus" :disabled="this.flag"></el-input>
        </el-form-item>
       <el-form-item label="创建人" prop="createuser">
           <el-input v-model="ruleForm.createuser" :disabled="this.flag"></el-input>
        </el-form-item>
        <el-form-item label="更新人" prop="updateuser">
            <el-input v-model="ruleForm.updateuser" :disabled="this.flag"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
            <el-input v-model="ruleForm.remarks" :disabled="this.flag"></el-input>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" >点击修改</el-button>
        <el-button type="primary" @click="submitFormzhuce('ruleForm')" >点击注册</el-button>
        <el-button @click="resetForm('ruleForm')" >确定修改</el-button>
        <el-button @click="zhuceForm('ruleForm')" >确认注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
name: "StoreInfo",
 data() {
       return {
         upload: false,
         dialogVisible: false,
         srcLogo: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
         srcPermit: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
         srcLicense: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
         fileList:[],
         flag:true,
         ruleForm: {
           storename: '',
           storeintro:'',
           address: '',
           linkman: '',
           phone: '',
           orderphone: '',
           initiateprice: '',
           dphprice: '',
           affiche:'',
           notice:'',
           dispatching:'',
           storescore:'',
          storestatus:'',
           createuser:'',
           updateuser:'',
           logo:'',
           permit:'',
           license:'',
         },
       };
     },
   methods: {
     changeImg(){
       console.log("=====")
       var reads = new FileReader();
       var file = document.getElementById("filename").files[0];
       reads.readAsDataURL(file);
       reads.onload=function(){
         document.getElementById("img").src= this.result;
       }
     },
    initStoreData(){
       this.$http.get("/storeInfo/getStoreInfoByAccount").then(resp=>{
        if(resp.data.code==200){
          this.ruleForm = resp.data.data

          alert("初始化信息成功")
        }
       })

    },
    handleRemove(file, fileList) {
         console.log(file, fileList);
     },
     handlePictureCardPreview(file) {
          this.LOGO = file.url;
          console.log(file.url);
           console.log(file)
            this.dialogVisible = true;
     },
    uploadLogo(response, file, fileList){
      this.ruleForm.logo=file.url
      console.log(this.ruleForm)
      console.log(file)
      console.log(fileList)
    },
    uploadLicense(response, file, fileList){
          this.ruleForm.license=file.url
          console.log(this.ruleForm)
          console.log(file)
          console.log(fileList)
    } ,
    uploadPermit(response, file, fileList){
           this.ruleForm.permit=file.url
           console.log(this.ruleForm)
           console.log(file)
           console.log(fileList)
     },
        submitForm(formName) {
          this.upload=true
          this.flag=false
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
      submitFormzhuce(){
        this.upload=false
        this.flag=false
     },
        resetForm(formName) {
          console.log(this.ruleForm)
          this.$refs[formName].resetFields();
          this.$http.post("/storeInfo/updateStoreInfo",this.ruleForm).then(resp=>{
            if(resp.data.code==200){
              this.$router.go(0)
            }else{
              alert("已注册")
            }
          })
        },
        zhuceForm(formName) {
           console.log(this.LOGO)
           console.log(this.ruleForm)
           this.$refs[formName].resetFields();
           this.$http.post("/storeRegister/register",this.ruleForm).then(resp=>{
             if(resp.data.code==200){
               alert("修改成功!")
               this.init_data
             }
           })
     }
      },
        created() {
              this.initStoreData()
         }
}
</script>

<style>
input[type=file]{
  display:"block"
}
.el-image__error, .el-image__inner, .el-image__placeholder {
    width: 50%;
    height: 100%;
}
</style>
